<template>
	<view class="page">
		<view class="jober-detail flex-between">
			<image class="left-arrow" src="../../../static/left-arrow.png" mode=""></image>
			<view class="star-share flex-align">
				<u-icon name="star" color="#3D3D3D" size="28"></u-icon>
				<u-icon name="share" color="#3D3D3D" size="28"></u-icon>
				<u-icon name="more-dot-fill" color="#3D3D3D" size="22"></u-icon>
			</view>
		</view>
		<view class="avatar flex-between">
			<view class="">
				<u--text class="xingming" text="郭春香" color="#3d3d3d" size="38rpx" bold></u--text>
				<u--text class="xingming" text="锐明信息技术股份有限公司" color="#6D6D6D" size="32rpx" margin="10rpx 0rpx 0rpx 0rpx"
					lineHeight="26"></u--text>
				<u--text class="xingming" text="产品经理" color="#6D6D6D" size="32rpx" lineHeight="26"></u--text>
			</view>
			<u-avatar src="" shape="square" size="60"></u-avatar>
		</view>
		<view class="resume-summary">
			<view class="summary flex-align">
				<u--text text="简历摘要" color="#1872FF" size="28rpx"></u--text>
				<u-icon name="question-circle" color="#8D8D8D" size="22"></u-icon>
			</view>
			<u--text text="1.双一流院校重庆大学信息与计算科学专业本科" color="#6D6D6D" size="28rpx" margin="10rpx 0rpx 0rpx 0rpx"></u--text>
			<u--text text="2.负责产品设计、系统自动派单规则设计等，共输出4份产品流程图/PRD文档" color="#6D6D6D" size="28rpx"
				lineHeight="20"></u--text>
			<u--text text="3.个人所得税纳税信用评价项目，担任产品经理角色，从0-1进行产品规划设计" color="#6D6D6D" size="28rpx"></u--text>
		</view>
		<view class="onDutyStatus flex-between">
			<u--text text="离职-随时到岗" color="#2C2C2C" size="32rpx" bold></u--text>
			<u--text text="在线" color="#68C948" size="28rpx"></u--text>
		</view>
		<view class="year flex-align">
			<view class="university flex-align">
				<image src="../../../static/business-briefcase.png" mode=""></image>
				<u--text text="6年" color="#6D6D6D" size="24rpx"></u--text>
			</view>
			<view class="university flex-align">
				<image src="../../../static/mortarboard.png" mode=""></image>
				<u--text text="本科" color="#6D6D6D" size="24rpx"></u--text>
			</view>
			<view class="university flex-align">
				<image src="../../../static/birthday-cake.png" mode=""></image>
				<u--text text="32岁" color="#6D6D6D" size="24rpx"></u--text>
			</view>
		</view>
		<view class="introduce">
			<text>{{content}}</text>
			<text>查看全部</text>
		</view>
		<view class="position flex">
			<view class="positionlist flex-justify" v-for=" item in keyword">
				<u--text :text="item" color="#6D6D6D" size="24rpx"></u--text>
			</view>
		</view>
		<u-scroll-list>
			<view class="scroll-list" v-for="(item, index) in list" :key="index">
				<view class="biographical-notes flex-align">
					<image :src="item.thumb"></image>
					<u--text text="已上传简历" color="#3D3D3D" size="28rpx"></u--text>
					<u-button text="沟通获取"></u-button>
				</view>
			</view>
		</u-scroll-list>
		<u--text class="job-expectations" text="求职期望" color="#2C2C2C" size="36rpx"
			margin="30rpx 0rpx 52rpx 0rpx"></u--text>
		<view class="job-saraly flex-between">
			<u--text text="产品经理，重庆" color="#2C2C2C" size="32rpx"></u--text>
			<u--text text="20-22K" color="#1872FF" size="36rpx"></u--text>
		</view>
		<view class="cleanUp flex-justify">
			<navigator url="/pages/job-seekers/communicate/index">
				<u-button text="立即沟通"></u-button>
			</navigator>
			<u-button type="primary" text="好友申请"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '5年项目开发经验，4年产品经验和项目管理经验，管理团队5-8人。主要从事政务系统、网络营销、工作流管理、政府系统等行业软件开发I作和项目管理工作，执行力强，能有效完成工作任务，',
				keyword: ['产品竞争', '用户需求', '产品规划', '需求分析', '项目管理', '产品竞争', '用户需求'],
				list: [{
					thumb: '../../../static/word-icon.png'
				}, {
					thumb: '../../../static/pdf.png'
				}, {
					thumb: '../../../static/word-icon.png'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		background-color: #ffffff;
		padding: 0rpx 42rpx 0rpx 46rpx;
	}

	.jober-detail {
		background-color: #ffffff;
		height: 108rpx;
	}

	.left-arrow {
		width: 40rpx;
		height: 40rpx;
	}

	.star-share {
		column-gap: 6rpx;
	}

	.avatar {
		align-items: flex-start;
		margin-bottom: 58rpx;
	}

	.resume-summary {
		width: calc(100%-60rpx);
		padding: 14rpx 30rpx;
		height: 264rpx;
		background: #ECF5FE;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	::v-deep .summary .u--text {
		flex: 0;
	}

	.summary {
		column-gap: 10rpx;
	}

	.onDutyStatus {
		margin: 26rpx 0rpx 10rpx 0rpx;
	}

	.onDutyStatus .u-text {
		flex: 0;
		white-space: nowrap;
	}

	.onDutyStatus .u-text:nth-child(2):before,
	.job-expectations:before {
		content: "";
		width: 12rpx;
		height: 12rpx;
		background-color: #68C948;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.job-expectations:before {
		background: #1872FF;
	}

	.university {
		margin-top: 12rpx;
		align-items: center;
		column-gap: 10rpx;
	}

	.university:nth-child(1) image {
		width: 16px;
		height: 15px;
	}

	.university:nth-child(2) image {
		width: 18px;
		height: 13px;
	}

	.university:nth-child(3) image {
		width: 15px;
		height: 15px;
	}

	.year {
		column-gap: 54rpx;
		margin-bottom: 16rpx;
	}

	.introduce text:nth-child(1) {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #6D6D6D;
		line-height: 40rpx;
		text-align: left;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.introduce text:nth-child(2) {
		font-size: 28rpx;
		color: #1872FF;
	}

	.position {
		flex-wrap: wrap;
		column-gap: 12rpx;
		row-gap: 16rpx;
		margin-top: 16rpx;
		margin-bottom: 50rpx;
	}

	.positionlist {
		width: 112rpx;
		height: 38rpx;
		background-color: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	::v-deep .positionlist .u-text,
	.job-saraly .u-text {
		white-space: nowrap;
		flex: 0;
	}

	::v-deep .positionlist .u-text span {
		line-height: 11px;
	}

	::v-deep .u-scroll-list__indicator {
		display: none;
	}

	::v-deep .u-scroll-list {
		padding: 0 !important;
	}

	::v-deep .u-scroll-list__scroll-view__content {
		column-gap: 20rpx;
	}

	.biographical-notes {
		width: 498rpx;
		height: 100rpx;
		background-color: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.biographical-notes image {
		width: 64rpx;
		height: 70rpx;
		margin: 0rpx 8rpx 0rpx 18rpx;
	}

	.biographical-notes .u-text {
		white-space: nowrap;
		margin-left: 18rpx;
	}

	.biographical-notes .u-button {
		width: 140rpx;
		height: 52rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #1872FF;
		font-size: 24rpx;
		color: #1872FF;
		margin-right: 28rpx;
	}

	::v-deep .biographical-notes .u-button span {
		font-size: 24rpx;
	}

	.job-saraly {
		padding-bottom: 260rpx;
	}

	.cleanUp {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		padding: 40rpx 0rpx 50rpx 0rpx;
		column-gap: 20rpx;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
	}

	.cleanUp .u-button:after {
		content: none;
	}

	.cleanUp .u-button:nth-child(1) {
		background-color: #ffffff;
		color: #1872FF;
		margin: 0;
		width: 304rpx;
		height: 98rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #1872FF;
	}

	.cleanUp .u-button:nth-child(2) {
		color: #FFFFFF;
		background-color: #429CFD;
		margin: 0;
		width: 304rpx;
		height: 98rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	::v-deep .cleanUp .u-button span {
		font-size: 36rpx;
	}
</style>